<template>
  <router-layout>
    <div class="body">
      <div class="banner">
        <img :src="datainfo.file_path" width="100%" alt>
      </div>
      <div class="voteNum">
        <div class="poll">
          <p class="number">{{ weekList.length || 0 }}</p>
          <div class="flex">
            <img src="https://gw.alicdn.com/tfs/TB19VdqOjTpK1RjSZKPXXa3UpXa-40-40.png" alt>
            <p>参赛者</p>
          </div>
        </div>
        <div class="pothunter">
          <p class="number">{{ datainfo.voteRecordSize || 0 }}</p>
          <div class="flex">
            <img src="https://gw.alicdn.com/tfs/TB1vOhgOgDqK1RjSZSyXXaxEVXa-40-40.png" alt>
            <p>投票数</p>
          </div>
        </div>
      </div>
      <div class="time">
        <div class="time-over van-hairline--top">
          <span class="time-name">投票将于：</span>
          <span class="time-date">{{ datainfo.vote_endtime | formate_date }}</span>
          <span style="font-size: 12px;color: #a0a0a0;">结束</span>
        </div>
        <div class="time-roul van-hairline--top">
          <span class="time-name">投票规则：</span>
          <span class="roul">
            <!-- 每个用户每天只能投 -->
            <i style=" color: #01a0ef; padding:0 2px;">{{ datainfo.vote_rule }}</i>
          </span>
        </div>
      </div>
      <div class="detail">
        <div class="zhuban">
          <div class="zhuban-title">
            <p>主办单位</p>
          </div>
          <div class="zhuban-name van-hairline--surround">
            <p>{{ datainfo.company_name }}</p>
          </div>
        </div>
        <!-- <div class="jiangxiang">
                  <div class="zhuban-title">
                      <p>奖项设置</p>
                  </div>
                  <div class="zhuban-name">
                      一等奖1名(票数为200票以上且排名第1)：
                      奖品奖品奖品奖品奖品奖品
                      二等奖3名(票数为100票以上且排名第2-4)：
                      奖品奖品奖品奖品奖品奖品
                      三等奖5名(票数为50票以上且排名第5-9)：
                      奖品奖品奖品奖品奖品奖品
                  </div>
        </div>-->
        <div class="jiangxiang">
          <div class="zhuban-title">
            <p>活动规则</p>
          </div>
          <div class="zhuban-name van-hairline--surround">
            <p>{{ datainfo.active_rule }}</p>
          </div>
        </div>
      </div>
    </div>
  </router-layout>
</template>
<script>
import { vote_findById } from "@/api/vote";
import moment from "moment";
import TitleItem from "../../components/public/title/title";
export default {
  name: "VoteRoul",
  components: { TitleItem },
  data() {
    return {
      datainfo: {},
      weekList: []
    };
  },
  filters: {
    formate_date(v) {
      return moment(v).format("YYYY 年 MM 月 DD 日 HH 时 mm 分 ss 秒");
    }
  },
  methods: {
    //获取数据
    async initList() {
      let query = Object.assign(
        {},
        { id: this.$route.query.id },
        { company_id: localStorage.getItem("companyId") - 0 }
      );
      let res = await vote_findById(query);
      let result = res.data;
      if (result.status == 100) {
        this.datainfo = result.data;
        this.weekList = result.data.voteOptions;
      }
    }
  },
  created() {
    this.initList();
  }
};
</script>
<style lang="scss" scoped>
@import "VoteRoul";
</style>
